import { BarChart3, TrendingUp, Activity, Clock } from 'lucide-react';
import { useLanguage } from '@kernelproxy/i18n';

const Analytics = () => {
  const { language } = useLanguage();

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          {language === 'zh-CN' ? '监控与分析' : 'Monitoring & Analytics'}
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-2">
          {language === 'zh-CN' ? '查看详细的使用统计和性能分析' : 'View detailed usage statistics and performance analytics'}
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {[
          { label: language === 'zh-CN' ? '今日请求' : 'Today Requests', value: '12.5K', change: '+15%', icon: Activity },
          { label: language === 'zh-CN' ? '成功率' : 'Success Rate', value: '99.8%', change: '+0.5%', icon: TrendingUp },
          { label: language === 'zh-CN' ? '平均响应' : 'Avg Response', value: '156ms', change: '-12ms', icon: Clock },
          { label: language === 'zh-CN' ? '流量使用' : 'Traffic Used', value: '450 GB', change: '+85 GB', icon: BarChart3 },
        ].map((stat, i) => (
          <div key={i} className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <stat.icon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
            <p className="text-2xl font-bold text-gray-900 dark:text-white mt-4">{stat.value}</p>
            <p className="text-gray-600 dark:text-gray-400 text-sm mt-1">{stat.label}</p>
            <p className="text-green-600 dark:text-green-400 text-xs mt-2">{stat.change}</p>
          </div>
        ))}
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">
          {language === 'zh-CN' ? '使用量趋势' : 'Usage Trends'}
        </h2>
        <div className="h-64 flex items-center justify-center text-gray-400">
          {language === 'zh-CN' ? '图表区域 (集成图表库)' : 'Chart Area (Integrate charting library)'}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
            {language === 'zh-CN' ? '地理位置分布' : 'Geographic Distribution'}
          </h2>
          <div className="space-y-3">
            {[
              { region: 'North America', requests: '45.2K', percentage: 36 },
              { region: 'Europe', requests: '38.1K', percentage: 30 },
              { region: 'Asia Pacific', requests: '28.5K', percentage: 23 },
              { region: 'Others', requests: '13.5K', percentage: 11 },
            ].map((region, i) => (
              <div key={i} className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-700 dark:text-gray-300">{region.region}</span>
                  <span className="font-medium text-gray-900 dark:text-white">{region.requests}</span>
                </div>
                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                  <div className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style={{ width: `${region.percentage}%` }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
            {language === 'zh-CN' ? '成功率报表' : 'Success Rate Report'}
          </h2>
          <div className="space-y-3">
            {[
              { service: language === 'zh-CN' ? '动态代理' : 'Dynamic', rate: 99.9, requests: '125K' },
              { service: language === 'zh-CN' ? '静态代理' : 'Static', rate: 99.7, requests: '86K' },
              { service: language === 'zh-CN' ? 'IPv6代理' : 'IPv6', rate: 99.8, requests: '45K' },
            ].map((service, i) => (
              <div key={i} className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium text-gray-900 dark:text-white">{service.service}</span>
                  <span className="text-green-600 dark:text-green-400 font-bold">{service.rate}%</span>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  {language === 'zh-CN' ? '请求数' : 'Requests'}: {service.requests}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Analytics;
